<template>
	<view class="" style="width: 100vw;height: 100vh">
		<view class="" :style="{'background':kbackgroundColor2}" style="min-height: 100vh">
			<hx-navbar title="我的银行卡" :back="true" :fixed="false" :color="knavTitleColor" barPlaceholder="hidden"
				transparent="auto">
			</hx-navbar>
			<view class="container" v-for="(item,index) in bankList"
				:class="[{'container-black':ktheme =='black'},{'container-purple':ktheme =='purple'}]">
				<view class="content" :style="{'color':knormalColor}">
					<view class="item-row">
						<view class="title">{{item.bankName}}</view>
						<view class="tag" v-if="item.tacit==2 && purseCardId==item.id" :style="[selStyle]">默认</view>
						<text class="right-title">
							****{{ formatBankCard(item.cardNumber) }}
						</text>
					</view>
					<view class="subtitle"><view v-if="item.type==1">个人账号</view><view
							v-if="item.type==2">企业账号</view></view>
				</view>
			</view>

			<view class="bottom_box">
				<view class="submit_btn" :style="{'background':kbuttonBgColor}" @click="addBank()">
					添加银行卡
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				purseCardId: '',
				bankList: [],
				cardLogo: [],
				page: 1,
				limit: 10,
				list: [],
				hasNextPage: true,
			}
		},
		onLoad() {
			//	this.getCardList()
		},
		onShow() {
			this.getCardList()
		},
		onPullDownRefresh() {
			setTimeout(function() {
				uni.stopPullDownRefresh()
			}, 1000)
			this.getCardList()
		},
		onReachBottom() {
			// if (this.hasNextPage) {
				// let new_page = this.page + 1
				// this.$api.purseCardLsit(res => {
				// 	if (res.status) {
				// 		// this.bankList =this.bankList.concat(res.data.list)
				// 		// this.hasNextPage =res.data.list.length >= this.limit;
				// 	} else {
				// 		this.$common.errorToShow(res.message)
				// 	}
				
				// })
			// }
		},
		methods: {
			formatBankCard(cardNumber) {
				// 如果卡号不存在或长度不足，则返回空字符串  
				if (!cardNumber || cardNumber.length < 4) {
					return '';
				}
				// 返回卡号后四位  
				return cardNumber.slice(-4);
			},
			getCardList() {
				this.list = [],
					this.page = 1;
				this.hasNextPage = true;
				this.$api.purseCardLsit(res => {
					if (res.status) {
						this.bankList = res.data.list
						let foundBank = this.bankList.find(val => val.tacit === 2);
						if (foundBank) {
							this.purseCardId = foundBank.id
							console.log("	this.purseCardId -",	this.purseCardId );
						}
						// this.hasNextPage = res.data.list.length >= this.limit;
					} else {
						this.$common.errorToShow(res.message)
					}

				})
				
				
			},
			addBank() {
				uni.navigateTo({
					url: '/pages/user/wallet/add-bankcard'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.body {
		width: 100vw;
		height: 100vh;
	}

	.container {
		margin: 40rpx 40rpx 0 40rpx;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;

		.content {
			// margin-top: 40rpx;
			// margin-bottom: 40rpx;
			display: flex;
			flex-direction: column;
			// padding: 0 40rpx;
			margin: 0 28rpx;
			padding: 28rpx 0;

			.subtitle {
				font-size: 20rpx;
			}

			.item-row {
				display: flex;
				flex-direction: row;
				align-items: center;
				font-size: 26rpx;

				.title {
					max-width: 50%;
					font-size: 30rpx;
					font-weight: bold;
				}

				.tag {
					padding: 10rpx 28rpx;
					margin-left: 20rpx;
					border-radius: 40rpx;
					border: var(--borderSty);
				}

				.right-title {
					margin-left: auto;
				}

				.input-view {
					margin-left: auto;
					text-align: right;
				}
			}
		}
	}

	.bottom_box {
		display: flex;
		align-items: center;
		justify-content: center;
		// position: absolute;
		margin: 60rpx auto;
		width: 100%;

		.submit_btn {
			width: 90%;
			height: 88rpx;
			line-height: 88rpx;
			color: white;
			text-align: center;
			border-radius: 50rpx;
			margin: 60rpx auto;
		}

		.submit_btn2 {
			width: 90%;
			height: 88rpx;
			border: 1rpx solid #d9d9d9;
			color: #999;
			line-height: 88rpx;
			text-align: center;
			border-radius: 50rpx;
		}
	}

	.container-purple {
		background-color: #ffffff;
	}

	.container-black {
		background-color: #1B1B1B;
	}
</style>